<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in letters" :key="item">{{item}}</li>
      </ul>
      <button @click="btnClick">按钮</button>
    </div>

    <script src="../js/vue.js"></script>

    <script>
      const app = new Vue({
        el: "#app",
        data: {
          letters: ["a", "b", "c", "d", "e"],
        },
        methods: {
          btnClick() {
            // 1. push方法
            // this.letters.push("aaa");
            // this.letters.push("aaa", "bbb");
            // 2. pop() 删除数组的最后一个元素
            // this.letters.pop();
            //3. shift() 删除数组的第一个原色
            // this.letters.shift
            //4. unshift() 在数组最前面添加元素
            // this.letters.unshift("aaa", "bbb");
            // splice作用：删除元素/插入元素/替换元素
            // 删除元素：第二个参数传入你要删除几个元素
            // 替换元素：第二个参数，表示我么你要替换几个元素，后面是用于替换前面的元素
            // 插入元素：第二个参数，传入0，并且后面跟上要插入的元素
            // splice(start)
            // this.letters.splice();
            // sort
            // this.letters.sort();
            // 6. reverse
            // this.letters.reverse()
            //注意：这个不是响应式的
            // 2. 通过索引值修改数组的元素 不是响应式的
            // this.letters[0] = "bbbbbb";
            // 使用其他方式替换 eg.   splice
            // set (要修改的对象，索引值，修改后的值)
            vue.set(this.letters, 0, "bbbbbbbb");
          },
        },
      });

      // function sum(...num) {
      //   // 放在了一个数组里面
      //   console.log(num);
      // }
      // sum(11, 2, 23, 34, 65, 23);
    </script>
  </body>
</html>
